<template>
    <FormDlg :title="title" @hide="onHide" @show="onShow" @submit="onSubmit" ref="dlg" :disabled="errors.any()">
        <div :class="{'form-group':true,'has-error': errors.has('parentid')}" v-show="form.ID != 'ROOT'">
            <label for="input-parentid" class="col-sm-4 control-label">父节点
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <select class="form-control" id="input-parentid" name="parentid" v-model.trim="form.ParentID" data-vv-as="父节点" disabled="disabled">
                  <option :value="form.ParentID">{{form.ParentName}}</option>
                </select>
            </div>
        </div>
        <div :class="{'form-group':true,'has-error': errors.has('name')}">
            <label for="input-name" class="col-sm-4 control-label">分组名称
                <span class="text-red">*</span>
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="input-name" name="name" v-model.trim="form.Name" data-vv-as="分组名称" v-validate="'required'" @keydown.enter="onNameEnter">
            </div>
        </div>
        <div :class="{'form-group':true,'has-error': errors.has('gbid')}" v-show="form.ID != 'ROOT'">
            <label for="input-gb-id" class="col-sm-4 control-label">国标编号
                <!-- <span class="text-red" v-if="form.add">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="input-gb-id" name="gbid" v-model.trim="form.GBID" data-vv-as="国标编号"  placeholder="不填表示当前分组不作国标级联" v-validate="'regex:^[0-9]+$'" @keydown.enter="$el.querySelector('#input-gb-id2').focus()">
            </div>
        </div>
        <div :class="{'form-group':true,'has-error': errors.has('gbid2')}" v-show="form.ID != 'ROOT'">
            <label for="input-gb-id2" class="col-sm-4 control-label">国标(二)编号
                <!-- <span class="text-red" v-if="form.add">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="input-gb-id2" name="gbid2" v-model.trim="form.GBID2" data-vv-as="国标(二)编号"  placeholder="不填表示当前分组不作国标(二)级联" v-validate="'regex:^[0-9]+$'" @keydown.enter="onSubmit">
            </div>
        </div>
    </FormDlg>
</template>

<script>
import FormDlg from 'components/FormDlg.vue'
import $ from 'jquery'

export default {
    data() {
        return {
            form: this.defForm(),
        }
    },
    components: {
        FormDlg
    },
    computed: {
        title() {
            if(!this.form.ID) return "新建分组";
            if(this.form.ID == 'ROOT') return "编辑名称";
            return "编辑分组";
        },
    },
    methods: {
        defForm() {
            return {
                ID: "",
                Name: "",
                ParentID: "",
                ParentName: '根目录',
                GBID: "",
                GBID2: "",
                Creator: "",
            }
        },
        onHide() {
            this.form = this.defForm();
            this.$emit("hide");
        },
        onShow() {
            this.errors.clear();
            this.$emit("show");
        },
        onNameEnter() {
            if(this.form.ID == 'ROOT') {
                this.onSubmit();
                return
            }
            this.$el.querySelector('#input-gb-id').focus();
        },
        async onSubmit() {
            var ok = await this.$validator.validateAll();
            if(!ok) {
                var e = this.errors.items[0];
                this.$message({
                    type: 'error',
                    message: e.msg
                })
                $(`[name=${e.field}]`).focus();
                return;
            }
            $.get('/api/v1/group/save', this.form).then(data => {
                var addFlag = !this.form.ID;
                var group = Object.assign({}, this.form, data);
                this.$refs['dlg'].hide();
                this.$emit("submit", addFlag, group);
            })
        },
        show(data) {
            this.errors.clear();
            if(data) {
                Object.assign(this.form, this.defForm, data);
            }
            this.$nextTick(() => {
                this.$refs['dlg'].show();
            })
        },
    }
}
</script>
